//横向经费
<template>
  <div class="module_">
    <div class="mb8">
      <search @clearSearch='clearSearch'>
        <el-form label-width='95px' inline autocomplete="off" :model="pageparm" class="search_box">
          <el-form-item label="合同名称">
            <el-input size="medium" clearable v-model.trim="pageparm.name" placeholder="请输入合同名称搜索" />
          </el-form-item>
          <el-form-item label="负责人姓名">
            <inputSearch ref="search_e" placeholder="请输入负责人姓名搜索" @onChange='searchChane($event,"leader_id")' />
          </el-form-item>
        </el-form>
        <template slot="footer">
          <exportExcel :apiFn="Apicontractfunds" name='横向经费' />
          <printComp :apiFn="Apicontractfunds" :options="pageparm" :properties='properties' :self="true"
            :dataFn='printData' />
        </template>
      </search>
    </div>
    <el-table ref="table" :data="tableData" class="flex-1" height="100%" size="medium" border highlight-current-row
      v-loading="tableLoading" stripe @sort-change="tableSortChange">
      <el-table-column align="center" v-for="(item,i) in headerList" :key="item.prop" :prop="item.prop"
        :label="item.label" :width="item.width" :fixed="i === 0 ? true: false" show-overflow-tooltip
        :sortable="item.noSortable ? false:'custom'">
        <template slot-scope="scope">
          <template v-if="isClick(item.prop)">
            <span :class="[echoColor(item.prop),'shou']"
              @click="goDetail(scope.row,item.prop)">{{scope.row[item.prop]}}</span>
          </template>
          <template v-else-if="item.prop === 'leader_id'">
            {{scope.row.leader_info?scope.row.leader_info.name:''}}
          </template>
          <template v-else>
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>


  </div>
</template>

<script>
  import {
    Apicontractfunds,
  } from '@/api'
  import printComp from '@/components/printComp.vue'

  export default {
    name: 'horizontalFunds',
    components: {
      printComp
    },
    computed: {
      properties() {
        return this.headerList.reduce((arr, item) => {
          arr.push({
            field: item.prop,
            displayName: item.label
          })
          return arr
        }, [])
      }
    },
    data() {
      return {
        Apicontractfunds,
        tableData: [],

        pageparm: {
          page: 1,
          perPage: 20,
          total: null,
          sort_str: null,
          sort_order: 'desc',
        },
        tableLoading: false,

        clickList: ['receive_funds', 'expend_funds', 'outside_funds', 'matching_funds', 'self_funds', 'hospital_funds'],

        headerList: [{
          prop: 'name',
          label: '合同名称',
          width: '250',
          sort: true
        }, {
          prop: 'contract_code',
          label: '合同编号',
          width: '150',
          sort: true
        }, {
          prop: 'leader_id',
          label: '负责人',
          width: '130',
          sort: true,
          exportName: 'leader_info.name',
        }, {
          prop: 'contract_amount',
          label: '合同金额(万元)',
          width: '160',
          sort: true,
        }, {
          prop: 'receive_funds',
          label: '合同到账(万元)',
          width: '160',
          noSortable: true
        }, {
          prop: 'matching_funds',
          label: '配套经费(万元)',
          width: '160',
          noSortable: true
        }, {
          prop: 'self_funds',
          label: '自筹经费(万元)',
          width: '160',
          noSortable: true
        }, {
          prop: 'hospital_funds',
          label: '院内经费(万元)',
          width: '160',
          noSortable: true
        }, {
          prop: 'expend_funds',
          label: '合同支出(万元)',
          width: '160',
          noSortable: true
        }, {
          prop: 'outside_funds',
          label: '合同外拨(万元)',
          width: '160',
          noSortable: true
        }, {
          prop: 'balance_funds',
          label: '合同余额(万元)',
          width: '160',
          noSortable: true
        }],

        path: {
          receive_funds: '/funds/horizontalFunds_arrival',
          expend_funds: '/funds/horizontalFunds_expenditure',
          outside_funds: '/funds/horizontalFunds_allocation',
          matching_funds: '/funds/horizontalFunds_matching',
          self_funds: '/funds/horizontalFunds_self',
          hospital_funds: '/funds/horizontalFunds_hospital',
        }
      }
    },
    activated() {
      this.getList()
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    methods: {
      printData(data) {
        data.forEach(item => {
          item.leader_id = item.leader_info ? item.leader_info.name : ''
        });
        return data
      },
      echoColor(prop) {
        switch (prop) {
          case 'expend_funds':
          case 'outside_funds':
            return "c-green";
          default:
            return 'c-blue'
        }
      },
      isClick(prop) {
        return this.clickList.includes(prop)
      },
      goDetail(val, i) {
        this.$router.push({
          path: this.path[i],
          query: {
            id: val.id
          }
        })
      },

      tableSortChange(column) {
        if (column.order === "descending") {
          this.pageparm.sort_str = column.prop;
          this.pageparm.sort_order = "desc";
        } else if (column.order === "ascending") {
          this.pageparm.sort_str = column.prop;
          this.pageparm.sort_order = "asc";
        } else {
          this.pageparm.sort_str = null;
          this.pageparm.sort_order = null;
        }
        this.getList()
      },
      //搜索
      clearSearch() {
        this.$refs.search_e.clear()
      },
      searchChane(i, val) {
        this.pageparm[val] = i
        this.pageparm.page = 1
        this.getList()
      },
      //分页
      callFather(pageparm) {
        this.pageparm.page = pageparm.page
        this.pageparm.perPage = pageparm.perPage
        this.getList()
      },
      getList() {
        this.tableLoading = true
        Apicontractfunds(this.pageparm).then(({
          data,
          page
        }) => {
          this.tableData = data || []
          this.pageparm.total = page.total
          this.tableLoading = false
        }).catch(() => {
          this.tableLoading = false
        })
      },
    },

  }
</script>